<template>
	<aside class="users">
		<div class="avator" :class="{svip: user != null && user.svip}">
			<img :src="$api.preview(user != null ? user.avatar : null)" />
		</div>
		
		<div class="wx" v-if="user != null">
			<p>
				<a href="javascript:void(0);">{{ user.nickName }}</a>
				<a class="modify" href="/modify">修改密码</a>
			</p>
			<p class="u">
				<a href="javascript:void(0);">{{ nameSecure(user.realName) }}</a>
				<a href="javascript:void(0);">{{ telSecure(user.tel) }}</a>
				<a href="javascript:void(0);">{{ user.sex ?? '保密' }}</a>
				<a href="javascript:void(0);">{{ user.birth ?? '暂无'}}</a>
			</p>
		</div>
		
		<div class="wx" v-else>
			<p>
				<a href="/login">点击登录</a>
			</p>
			<p class="u">
				<a href="javascript:void(0)">登录账号可享受大众会员特权</a>
			</p>
		</div>

		<p v-if="user!=null && !user.svip">
			<span class="lf"></span><a  @click="vipWin = true">立即开通 SVIP 会员</a><span class="rf"></span>
		</p>

    <p v-if="user!=null && user.svip">
      <span class="lf"></span>
      <a v-if="user.lifeDay != -1" @click="vipWin = true">
          SVIP会员剩余<b style="padding: 5px;color: goldenrod;font-size:16px">{{ user.lifeDay }}</b>天
      </a>
      <a v-else style="color: goldenrod; font-weight: 600;">永久性SVIP会员</a>
      <span class="rf"></span>
    </p>

    <p v-if="user == null">
      <span class="lf"></span><a href="/login">立即登录开启特权之旅</a><span class="rf"></span>
    </p>
		
		<div class="tq clearfix">
			<p class="download" :class="{svip: user != null }">下载权益</p>
      <p class="col" :class="{svip: user != null }">收藏特权</p>
			<p class="vip" :class="{svip: user != null && user.svip }">商城兑换</p>
      <p class="book" :class="{svip: user != null && user.svip }">免积分下载</p>
		</div>
		<VipCvsWin v-model="vipWin" />
	</aside>
</template>

<script>

import VipCvsWin from './VipCvsWin.vue' ;

export default {
	components: {
		VipCvsWin, 
	},
	data() {
		return {
			vipWin: false , // 是否显示 vip 充值窗口
		}
	},
  computed: {
     user() {
       return this.$store.getters.currentUser ;
     }
  },
  methods: {
    telSecure(tel) {
      return tel != null ? tel.substring(0, 3) + "****" + tel.substring(7) : "";
    },
    nameSecure(name) {
       if (name == null) return "暂无" ;
       if (name.length <= 2) return name ;
       return name.charAt(0) + " * " + name.charAt(name.length - 1) ;
    }
  }
	
}	
</script>

<style>
</style>